<template>
	
	<div>
		<h3>created函数的案例：</h3>
		<p>总共有：{{books.length}} 书</p>
		
		<hr>
		<table class="table table-bordered table-hover table-striped">
			<thead>
				<tr>
					<td>序号</td>
					<td>书名</td>
					<td>作者</td>
					<td>出版社</td>
				</tr>
			</thead>
			<tbody>
				<tr v-for="book in books" :key="book.id">
					<td>{{book.id}}</td>
					<td>{{book.bookname}}</td>
					<td>{{book.author}}</td>
					<td>{{book.publisher}}</td>
				</tr>
			</tbody>
		</table>	
	</div>
</template>
<script>
	//导入axios。js
	import axios from './axios.js'
	export default{
		data(){
			return {
				books:[]
			}
		},
		
		//对象创建完毕函数,自动调用ajax请求
		 async created() {
	       //调用axios请求
	       const {data : res} = await axios.get('http://www.liulongbin.top:3006/api/getbooks')
	       				console.log(res.data)
	       				this.books = res.data
		}
	}
</script>
<style scoped lang="less">
	/* 导入css样式 */
	@import './assets/bootstrap.css';
</style>
